<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ergo</title>
  <!-- 引入bootstrap -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

  <!-- 引入animate.css 动画效果 -->
  <link rel="stylesheet" href="./assets/css/animate.min.css" />

  <!-- 重置样式 -->
  <link rel="stylesheet" href="./assets/css/reset.css" />

  <!-- 公共样式 引入的是一个 less文件 -->
  <link rel="stylesheet/less" href="./assets/css/common.less" />

  <!-- 首页样式 -->
  <link rel="stylesheet/less" href="./assets/css/index.less" />

  <!-- 百度地图 -->
  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GKQgCv8IQXpYltUqeMlLhTzsj5NC92L0"></script>
</head>

<body>
  <!-- 头部 -->
  <header class="header" id="header">
    <div class="menu glyphicon glyphicon-th-list"></div>
    <div class="logo">
      <img src="./assets/images/logo.png" class="img-responsive" />
    </div>
    <div class="search glyphicon glyphicon-search"></div>
  </header>

  <!-- banner -->
  <div class="banner" id="banner">
    <img src="./assets/images/banner.png" class="img-responsive" />
  </div>

  <!-- 风险评估 -->
  <div class="risk" id="risk">
    <!-- 标题 -->
    <div class="title">风险评估</div>

    <!-- 图标 -->
    <div class="iconlist">
      <div class="item">
        <div class="icon">
          <img src="./assets/images/icon1.png" class="img-responsive" />
        </div>
        <div class="name">办公室</div>
      </div>
      <div class="item">
        <div class="icon">
          <img src="./assets/images/icon2.png" class="img-responsive" />
        </div>
        <div class="name">工业</div>
      </div>
      <div class="item">
        <div class="icon">
          <img src="./assets/images/icon3.png" class="img-responsive" />
        </div>
        <div class="name">个人/家居</div>
      </div>
      <div class="item">
        <div class="icon">
          <img src="./assets/images/icon4.png" class="img-responsive" />
        </div>
        <div class="name">其他行业</div>
      </div>
    </div>

    <!-- 盒子 -->
    <div class="box">
      <div class="back">
        <img src="./assets/images/img1.png" class="img-responsive" />
      </div>
      <div class="info">
        <h3 class="subject">专业咨询</h3>
        <ul>
          <li><a href="javascript:void(0)">个人咨询</a></li>
          <li><a href="javascript:void(0)">企业咨询</a></li>
        </ul>
      </div>
      <div class="back">
        <img src="./assets/images/img2.png" class="img-responsive" />
      </div>
      <div class="info">
        <h3 class="subject">专业培训</h3>
        <ul>
          <li><a href="javascript:void(0)">培训通知</a></li>
          <li><a href="javascript:void(0)">在线培训</a></li>
          <li><a href="javascript:void(0)">现场培训</a></li>
        </ul>
      </div>
      <div class="back">
        <img src="./assets/images/img3.png" class="img-responsive" />
      </div>
      <div class="info">
        <h3 class="subject">人体工学资源</h3>
        <ul>
          <li><a href="javascript:void(0)">案例分析</a></li>
          <li><a href="javascript:void(0)">企业广告</a></li>
          <li><a href="javascript:void(0)">产品推荐</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 应用 -->
  <div class="app" id="app">
    <!-- 标题 -->
    <div class="title">人体工学介绍和应用</div>
    <div class="info">
      <img src="./assets/images/appback.png" class="img-responsive" />

      <!-- 背景部分 -->
      <div class="back">
        <h3 class="subject">人体工学介绍</h3>
        <div class="taglist">
          <span>历史</span>
          <span>现在</span>
          <span>将来</span>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <div class="box">
      <div class="item">
        <img src="./assets/images/002.png" class="img-responsive" />
        <span class="name">职业应用</span>
      </div>
      <div class="item">
        <img src="./assets/images/003.png" class="img-responsive" />
        <span class="name">个人/家居应用</span>
      </div>
      <div class="item">
        <img src="./assets/images/001.png" class="img-responsive" />
        <span class="name">其他应用</span>
      </div>
    </div>
  </div>

  <!-- 联系我们 -->
  <div id="about" class="about">
    <!-- 标题 -->
    <div class="title">联系我们</div>

    <!-- 详细内容 -->
    <div class="info">
      <!-- 第一行 -->
      <div class="line">
        <div class="item">
          <img src="./assets/images/phone.png" class="img-responsive" />
          <span class="name">+86 15217196291</span>
        </div>
      </div>

      <!-- 第二行 -->
      <div class="line">
        <div class="item">
          <img src="./assets/images/app.png" class="img-responsive" />
          <span class="name">01-706-560-3604</span>
        </div>
        <div class="item">
          <img src="./assets/images/emial.png" class="img-responsive" />
          <span class="name"> ergo168@qq.com</span>
        </div>
      </div>

      <!-- 第三行 -->
      <div class="line">
        <div class="item">
          <img src="./assets/images/location.png" class="img-responsive" />
          <span class="name">广州市天河区珠江新城珠江西路高德置地D座15楼</span>
        </div>
      </div>
    </div>

    <!-- 地图 -->
    <div class="map" id="map"></div>
  </div>

    <!-- 底部 -->
    <footer class="footer">
      <a class="item" href="#header">
        <span class="glyphicon glyphicon-home"></span>
        <span>首页</span>
      </a>
      <a class="item" href="#risk">
        <span class="glyphicon glyphicon-calendar"></span>
        <span>风险评估</span>
      </a>
      <a class="item" href="#app">
        <span class="glyphicon glyphicon-list-alt"></span>
        <span>人体应用</span>
      </a>
      <a class="item" href="#about">
        <span class="glyphicon glyphicon-user"></span>
        <span>用户中心</span>
      </a>
    </footer>
</body>

</html>
<!-- 引入jquery -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap js  -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入less -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入懒加载插件 -->
<script src="./assets/js/wow.min.js"></script>

<!-- 滚动视觉差插 -->
<script src="./assets/js/parallax.min.js"></script>

<!-- 制作懒加载效果 -->
<script>
  // 实例化懒加载动画效果
  new WOW().init();

  //创建百度地图对象
  var map = new BMapGL.Map('map');

  //初始化地图，设置中心点坐标和地图级别
  map.centerAndZoom(new BMapGL.Point(113.32115, 23.10259), 20);

  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);

  //添加地图的控件
  map.addControl(new BMap.MapTypeControl({
    mapTypes:[
      BMAP_NORMAL_MAP,
      BMAP_HYBRID_MAP
    ]
  }));

  map.seCurrentCity("广州");

  map.enableScrollWheelZoom(true);
</script>